<!-- 左侧导航组件 -->
<!-- 使用说明：<side-bar></side-bar> -->
<template>
    <div class="sidebar-wrap" :class="{ collapsed: isCollapse }">
        <h3 class="logo-name">
            数据上报
        </h3>
        <el-menu
          default-active="shangbao"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          mode="vertical"
          background-color="#3f4d67"
          text-color="#fff"
          :router="true"
        >
          <el-menu-item index="shangbao"  >
            <i class="el-icon-reading"></i>
            <span slot="title">文件上报</span>
          </el-menu-item> 
          <!-- <el-menu-item index="userGroup" >
            <i class="el-icon-user"></i>
            <span slot="title">用户分组</span>
          </el-menu-item> -->
         
        </el-menu>
      </div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
export default {
  name:"side-bar",
  data() {
      return {

      };
    },
  computed: {
    ...mapGetters({
      userInfo: "getUserInfo"
    }),
    isCollapse() {
      return this.$store.state.isCollapse;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      // eslint-disable-next-line no-console
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // eslint-disable-next-line no-console
      console.log(key, keyPath);
    }
  }
};
</script>
<style scoped lang="scss">
.sidebar-wrap{
  width: 200px;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  transition: all 0.3s;
  background: #3f4d67;
  &.collapsed {
    width: 64px;
    transition: all 0.5s;
  }
  .logo-name{
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    margin: 0;
    text-align: center;
    background-color: #00b1fb;
    color: #fff;
    padding-top: 14px;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
